<template>
  <business-page/>
</template>

<script>
import util from '@/libs/util'
import BaseInfo from './components/basic-info'
import CarInfo from './components/car-info'
import CustomerInfo from './components/customer-info'
import AgreementInfo from './components/agreement-info'

export default {
  components: {
    AgreementInfo,
    BaseInfo,
    CarInfo,
    CustomerInfo
  },
  data () {
    return {
      status: {
        basic: 'success',
        car: 'success',
        customer: 'success',
        agreement: 'success',
      },
      forms: [
        {
          key: 'baseInfo',
          title: '基本'
        }
      ]
    }
  },
  methods: {
    async handleSubmit () {
      const forms = [
        this.$refs.basic.$refs.d2Crud,
        this.$refs.car,
        this.$refs.customer,
        this.$refs.agreement,
      ]
      let error = false
      for (const form of forms) {
        let valid = await form.doValidate()
        if (!valid) {
          error = true
        }
      }
      if (error) {
        return
      }

      const data = {
        ...this.$refs.basic.getEditForm(),
        ...this.$refs.car.getEditForm(),
        ...this.$refs.customer.getEditForm(),
        ...this.$refs.agreement.getEditForm()
      }
      console.log(data)

      this.$message.success('提交成功')
    },
    handleValidate (form, success) {
      if (success) {
        this.status[form] = 'success'
      } else {
        this.status[form] = 'error'
      }
    },
    handleNavClick (item) {
      let $el = this.$refs[item.key].$el
      util.scrollByEl($el)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-menu-item{
  height: 20px;
  line-height: 20px;
}
</style>

<style lang="scss">

</style>
